<template>
	<s-layout title="转账" :bgStyle="{color:'#F6F6F6'}" onShareAppMessage>
		<view class="tips text-c-c">填写对方账户</view>
		<view class="amount-input ss-flex ss-col-center">
			<view class="other">对方账户</view>
			<input type="number" class="input-view" placeholder="对方手机号码" maxlength="11" v-model="state.mobile"
				placeholder-style="font-family: Source Han Sans;font-size: 28rpx;font-weight: normal;letter-spacing: normal;color: #999999" />
		</view>
		<view class="account-card ss-flex-row ss-row-center ss-col-center" v-if="state.user.nickname" @click="userClick">
			<view class="card ss-flex-row ss-row--left ss-col-center">
				<image :src="calcSrc"
					style="width:70rpx;height:70rpx;min-width:70rpx;max-height:70rpx;margin-left: 17rpx;margin-right: 14rpx;"></image>
				<view class="user">
					<view class="name">{{state.user.nickname}}</view>
					<view class="mobile">{{state.user.mobile?formatPhoneNumber(state.user?.mobile):''}}</view>
				</view>
			</view>
		</view>
		<view class="btn-view" @click="sureClick">确认</view>
		
		<view class="bottom-view ss-flex-row ss-row-center ss-col-center">
			<view class="logs" @click="sheep.$router.go('/pages/virement/logs')">转账记录</view>
			<view class="customer" @click="show=true">联系客服</view>

		</view>
		
		<su-popup :show="show" type="center" @maskClick="show=false">
			<view class="customer ss-flex-col ss-col-top ss-row-center">
				<image :src="sheep.$url.cdn('/static/user/customer-bg.png')" class="bg-img-customer"></image>
				<view class="customer-bottom ss-flex-row ss-row-between ss-col-center">
					<view class="title ss-flex-row ss-row-center ss-col-center">
						<view class="label-1">尝试一下鲸囍客服</view>
						<view class="label-2">在线为您服务</view>
					</view>
					<view class="left-cus ss-flex-row ss-row-center ss-col-center" @click="onlineCustomer">
						<image :src="sheep.$url.cdn('/static/user/online.png')" style="width:30rpx;height:30rpx;margin-right: 30rpx;">
						</image>
						<view class="online-txt left-color">在线客服
						</view>
					</view>
					<view class="right-cus ss-flex-row ss-row-center ss-col-center" @click="callPhone">
						<image :src="sheep.$url.cdn('/static/user/mobile.png')" style="width:30rpx;height:30rpx;margin-right: 30rpx;">
						</image>
						<view class="online-txt right-color">电话咨询
						</view>
					</view>
				</view>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
// #ifdef APP
import imStore from "@/im/store/im.js"
// #endif
	import {
		onLoad,
		onShow,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';
	
	const show = ref(false);
	
	const state = reactive({
		mobile: '',
		user:{},
	})
	
	const calcSrc = computed(()=>{
		
		if(state.user.avatar){
			if(state.user.avatar.startsWith("https")||state.user.avatar.startsWith("http")){
				return state.user.avatar;
			}else{
				return sheep.$url.cdn(state.user.avatar)
			}
		}
	})
	
	//格式化电话号码
	function formatPhoneNumber(phone) {
		return phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1 $2 $3');
	}
	
	//打电话
	function callPhone(){
		
		show.value = false;
		
		uni.showModal({
			title: '提示',
			content: '即将拨打客服电话',
			success:function(res){
				if(res.confirm){
					uni.makePhoneCall({
						phoneNumber: '18906531877',
					})
				}
			}
		})
	}
	//联系客服
	function onlineCustomer(){
		
		show.value = false;
		
		let to = {
			aim: 'message',
			service: {
				mobile: '18906531877'
			}
		}
		
		uni.showToast({
			title:'即将跳转到聊天',
			icon:'none',
			duration: 200
		})
		
		setTimeout(()=>{
			// #ifdef APP
				  imStore().webQueryAnalysis(to)
				  // #endif
			// #ifndef APP
			uni.navigateTo({
				url: "/im/pages/web?to=" + encodeURIComponent(JSON.stringify(to)),
			})
			// #endif
		},100)
	}
	
	function userClick(){
		sheep.$router.go('/pages/virement/sure?mobile='+state.mobile);
		state.user = {};
		state.mobile = '';
	}
	
	
	
	async function sureClick(){
	
		
		const res = await sheep.$api.transfer.getUserInfoByMobile({mobile:state.mobile});
		
		if(res.error==0){
			
			if(res.data){
				state.user = res.data;
			}else{
				uni.showToast({
					title:'找不到用户了',
					icon:'none',
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.tips {
		margin-top: 199rpx;
		width: 100%;
		height: 43rpx;
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: normal;
		color: #1E1E1E;
	}

	.amount-input {
		width: calc(100% - 22rpx - 21rpx - 20rpx - 18rpx);
		padding: 30rpx 20rpx 30rpx 21rpx;
		margin-top: 43rpx;
		margin-left: 22rpx;
		margin-right: 18rpx;
		height: calc(103rpx - 22rpx - 18rpx);
		border-radius: 20rpx;
		background: #FFFFFF;

		.other {
			width: 120rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 550;
			line-height: 43rpx;
			letter-spacing: normal;
			color: #1E1E1E;
		}

		.input-view {
			margin-left: 50rpx;
			text-align: left;
			margin-right: 20rpx;
		}

	}

	.account-card {
		margin-top: 17rpx;
		height: 113rpx;
		width: 100%;

		.card {
			height: calc(100% - 10rpx - 11rpx);
			width: 381rpx;
			padding-top: 11rpx;
			padding-bottom: 10rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
		}

		.name {
			width:260rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 41rpx;
			letter-spacing: normal;
			color: #202020;
		}

		.mobile {
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #999999;
		}
	}

	.btn-view {

		width: calc(100% - 22rpx - 18rpx);
		height: calc(104rpx - 29rpx);
		margin-top: 82rpx;
		margin-left: 22rpx;
		margin-right: 18rpx;

		padding-top: 29rpx;
		font-family: Source Han Sans;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 46rpx;
		text-align: center;
		letter-spacing: normal;
		color: #FFFFFF;


		border-radius: 100rpx;
		background: #4E31EF;
	}

	.bottom-view {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 41rpx;
		bottom: calc(10rpx + env(safe-area-inset-bottom)) !important;

		.logs {
			border-right: 1rpx solid #D8D8D8;
			;
			padding-right: 23rpx;
			width: 112rpx;
			height: 41rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: normal;
			letter-spacing: normal;
			color: #0256FF;
		}

		.customer {
			padding-left: 19rpx;
			width: 112rpx;
			height: 41rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: normal;
			letter-spacing: normal;
			color: #0256FF;
		}
	}


	.text-c-c {
		display: flex;
		justify-content: center;
		align-items: center;

	}
	
	.customer {
		width: 690rpx;
		height: 811.76rpx;
		position:relative;
		// background-color: red;
	
		.customer-bottom {
			height: 90rpx;
			width: 690rpx;
			.left-cus{
				width:calc(690rpx / 2);
				height:90rpx;
				border-top: 1rpx solid #E7E7E7;;
			}
			.right-cus{
				width:calc(690rpx / 2);
				height:90rpx;
				border-top: 1rpx solid #E7E7E7;
				border-left: 1rpx solid #E7E7E7;
			}
			.left-color{
				color:#CA9057;
			}
			.right-color{
				color:#4F4F4F;
			}
		}
		.bg-img-customer {
			width: 100%;
			height: 722rpx;
		}
		.title{
			position:absolute;
			width: 690rpx;
			top:87rpx;
			.label-1{
				
				
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: 0em;
				
				color: #AFAFAF;
				margin-right:7rpx;
			}
			.label-2{
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: 500;
				line-height: normal;
				
				color: #2E2E2E;
			}
			
		}
		.kefu-class{
			margin-right:-10rpx;
		}
	}
</style>